/* body coloring */
html {
    background: #300;
}

html {
    font-family: Arial, verdana, tahoma, sans-serif;

    background: #330000;
    background:-moz-linear-gradient(top,#ff0000,#330000 180px); /* firefox prefers -webkit- in 46.0a2 */
    background:-webkit-gradient(linear,0 0,0 80,from(#ff0000),to(#330000));
    background: linear-gradient(to bottom,#FF0000,#330000 180px);
    background-attachment: local;
    color: #d8d8d8;
    height: auto;
}

.top-nav {
    background: #330000;
    border-color: #333;
}

/* board title */
.board-header #labelName {
    text-shadow: 0px 0px 0.8em #F00, 0px 0px 0.8em #F00;
    color: #F8C20F;
    font-family: tahoma;
    font-weight: normal;
}

.board-header #labelDescription {
    color: red;
    font-size: 0.85rem;
}

@keyframes rainbow {
    0%, 100% { color: red; text-shadow: -1px 0 0 orange, -2px 0 0 yellow, -3px 0 0 lime, -4px 0 0 green, -5px 0 0 blue, -6px 0 0 magenta; }
    14% { color: orange; text-shadow: -1px 0 0 yellow, -2px 0 0 lime, -3px 0 0 green, -4px 0 0 blue, -5px 0 0 magenta, -6px 0 0 red; }
    28% { color: yellow; text-shadow: -1px 0 0 lime, -2px 0 0 green, -3px 0 0 blue, -4px 0 0 magenta, -5px 0 0 red, -6px 0 0 orange; }
    43% { color: lime; text-shadow: -1px 0 0 green, -2px 0 0 blue, -3px 0 0 magenta, -4px 0 0 red, -5px 0 0 orange, -6px 0 0 yellow; }
    57% { color: green; text-shadow: -1px 0 0 blue, -2px 0 0 magenta, -3px 0 0 red, -4px 0 0 orange, -5px 0 0 yellow, -6px 0 0 lime; }
    71% { color: blue; text-shadow: -1px 0 0 magenta, -2px 0 0 red, -3px 0 0 orange, -4px 0 0 yellow, -5px 0 0 lime, -6px 0 0 green; }
    86% { color: magenta; text-shadow: -1px 0 0 red, -2px 0 0 orange, -3px 0 0 yellow, -4px 0 0 lime, -5px 0 0 green, -6px 0 0 blue; }
}

span.redText {
    animation: rainbow 2s linear infinite;
    font-size: 2rem;
    padding-left: 5px;
}

span.labelRole {
    font-size: 0;
}

span.labelRole::after {
    content: "HOTPOCKET";
    font-size: 0.85rem;
    animation: rainbow 0.5s linear infinite;
    padding-left: 4px;
}

/* yellow link colors */

a {
    text-decoration:none;
    color:#f8c20f;
}

a:link, a:visited,
.linkSelf, .linkQuote {
    color: #f8c20f;
}

a:link:hover{
    color:#784818;
}

.innerPost, .markedPost {
    background-color: #333;
    border-color: #222;
    border-radius: 0;
    border-width: 1px;
    border-top-width: 0;
    border-left-width: 0;
}

.markedPost {
    background-color: #555;
}

#posting-table th {
    background: #222;
}

/* post author */
.linkName {
    color: #F8C20F;
}

/* undo lynx bold autism */
.labelCreated, .linkSelf, .linkQuote, .panelBacklinks {
    font-weight: normal;
}

.labelYou {
    color: #F8C20F;
}

.quoteLink, .panelBacklinks a {
    text-decoration: none;
}

.quoteLink.you:after {
    font-size: 85%;
}

#quick-reply {
    background-color: #333;
    color: black;
}

#quick-reply summary,
#quick-reply label {
    color: white;
}

#quick-reply .handle {
    background-color: #300;
    color: white
}

#posting-table [type=text],
#posting-table textarea,
#posting-extra-table [type=text],
#posting-extra-table [type=password],
#posting-extra-table textarea,
#quick-reply [type=text],
#quick-reply textarea,
#quick-reply [type=password] {
    background-color: #383838;
    border: 1px solid #222;
    border-radius: 4px;
    padding: 0.5rem;
    color: white;
}

#quick-reply input::placeholder,
#quick-reply textarea::placeholder {
    color: #CCC;
}

.dropzone {
    color: black;
}

.labelSubject {
    color: red;
}

.linkSelf:visited, .linkQuote:visited, .quoteLink:visited {
    color: #f8c20f;
}

.quoteLink.you::after {
    color: #F8C20F;
    font-style: italic;
}